import React, { Component } from 'react'
import axios from '../axi'
import '../css/wenji.css'

export default class Wenji extends Component {
    state = {
        data: [],
        id: '',
        obj: {},
        Stitle: '',
        content: '',
        Sindex: 0,
        flag: true,
        addSt: '',
        addCont: '',
        sign: true,
        createFt: '',
        flag2: true
    }

    getwenji = async () => {
        let { data: { data } } = await axios.get('/getwenji')
        if (data.length > 0) {
            console.log(1);
            this.setState({
                data,
                id: data[0]._id,
                Stitle: [...data[0].Stitle],
                content: [...data[0].content],
                flag: true,
                sign: true,
            })
        }
    }

    changeshow = (ele) => {
        this.setState({
            id: ele._id,
            Stitle: ele.Stitle,
            content: ele.content
        })
    }

    del = async (id) => {
        let { data } = await axios.get('del?_id=' + id)
        this.getwenji()
    }

    add = async () => {
        let { id, data, addSt, addCont } = this.state
        let i = data.findIndex(ele => ele._id === id)
        let newSt = [...data[i].Stitle]
        let newcontent = [...data[i].content]

        newSt.push(addSt)
        newcontent.push(addCont)
        console.log(newSt, newcontent);
        let obj = {
            _id: data[i]._id,
            Ftitle: data[i].Ftitle,
            Stitle: newSt,
            content: newcontent
        }
        let { info } = await axios.post('update', obj)
        this.getwenji()
    }

    addwenji = async () => {
        let { createFt } = this.state
        let obj = {
            Ftitle: createFt,
            Stitle: [],
            content: []
        }
        let { data } = await axios.post('addwenji', obj)
        this.getwenji()
    }

    changestate = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    delone = async (index) => {
        let { id, data } = this.state
        let i = data.findIndex(ele => ele._id === id)
        let newSt = [...data[i].Stitle]
        let newcontent = [...data[i].content]

        newSt.splice(index, 1)
        newcontent.splice(index, 1)
        console.log(newSt, newcontent);
        let obj = {
            _id: data[i]._id,
            Ftitle: data[i].Ftitle,
            Stitle: newSt,
            content: newcontent
        }
        let { info } = await axios.post('update', obj)
        this.getwenji()
    }

    update = async() => {
        // let { id, data, addSt, addCont } = this.state
        // let i = data.findIndex(ele => ele._id === id)
        // let newSt = [...data[i].Stitle]
        // let newcontent = [...data[i].content]

        // newSt.push(addSt)
        // newcontent.push(addCont)
        // console.log(newSt, newcontent);
        // let obj = {
        //     _id: data[i]._id,
        //     Ftitle: data[i].Ftitle,
        //     Stitle: newSt,
        //     content: newcontent
        // }
        // let { info } = await axios.post('update', obj)
        // this.getwenji()
    }

    componentDidMount() {
        this.getwenji()
    }
    render() {
        let { data, id, obj, Stitle, content, Sindex, flag, addSt, addCont, sign, createFt, flag2 } = this.state
        let newSt = [...Stitle]
        let newcontent = [...content]
        return (
            <div id='main'>
                <div id='fst'>
                    <button onClick={() => { this.setState({ sign: !sign }) }}>新建文集</button>
                    <div className={sign ? 'hidden' : ''}>
                        文集标题:
                        <input type="text" value={createFt} name='createFt' onChange={(e) => { this.changestate(e) }} /><br />
                        <button onClick={() => { this.addwenji() }}>发表</button>
                    </div>
                    <ul>
                        {data.map(ele => (
                            <li key={ele._id}
                                onClick={() => { this.changeshow(ele) }}
                                className={id === ele._id ? 'hl' : ''}>
                                {ele.Ftitle}
                                {id === ele._id ? <button onClick={() => { this.del(ele._id) }}>删除</button> : ''}
                            </li>
                        ))}
                    </ul>
                </div>
                <div id='sed'>
                    <div className={flag ? 'hidden' : ''}>
                        文章标题:
                        <input type="text" value={addSt} name='addSt' onChange={(e) => { this.changestate(e) }} /><br />
                        文章内容:
                        <input type="text" value={addCont} name='addCont' onChange={(e) => { this.changestate(e) }} /><br />
                        <button onClick={() => { this.add() }}>发表</button>
                    </div>
                    <ul>
                        <button onClick={() => { this.setState({ flag: !flag }) }}>新建文章</button>
                        {
                            newSt.map((ele, i) => (
                                <li key={i} className={Sindex === i ? 'Shl' : ''}
                                    onClick={() => { this.setState({ Sindex: i }) }}>
                                    {ele}
                                    <button onClick={() => { this.delone(i) }}>删除</button>
                                </li>
                            ))
                        }

                    </ul>
                </div>
                <div id='cont'>
                    {/* <div>
                        文章标题:
                        <input type="text" value={addSt} name='addSt' onChange={(e) => { this.changestate(e) }} /><br />
                        文章内容:
                        <input type="text" value={addCont} name='addCont' onChange={(e) => { this.changestate(e) }} /><br />
                        <button onClick={() => { this.update() }}></button>
                    </div> */}
                    <ul>
                        {
                            newcontent.map((ele, i) => (
                                <li key={i} className={i === Sindex ? '' : 'hidden'}>
                                    <h1>{Stitle[Sindex]}</h1>
                                    <p>{ele}</p>
                                    <button onClick={() => { this.setState({flag2: !flag2}) }}>编辑</button>
                                </li>
                            ))
                        }
                    </ul>
                </div>
            </div>
        )
    }
}
